<template>
  <view class="pay">
   <view class="site address-btn u-flex u-row-center">
     <view v-if="!address">
       <u-button   
          shape="circle"
          type="error"
          plain
          size="medium" 
           @click="handleChooseAddress"
          :custom-style="{backgroundColor:'#fff!important'}">
          选择地址
       </u-button>
      </view>
      <view v-else>
        <view>{{addressDetail}}</view>
        <view>{{address.userName}}    {{address.telNumber}}</view>
      </view>
   </view>

   <view class="selected">
       <view class="selected-text">已选商品</view>
       <view class="cart-list">
        <view class="cart-item" v-for="item in checkedCartList" :key="item.goods_id">
        <!--  图片 -->
        <view class="goods-img">
          <u-image
            width="191rpx"
            height="191rpx"
            :src="item.goods_small_logo"
          ></u-image>
        </view>
        <!-- 3 信息 -->
        <view class="goods-info">
          <!-- 名称 -->
          <view class="goods-name u-line-2">{{item.goods_name}}</view>
          <!-- 价格和数量 -->
          <view class="goods-price-num">
            <view class="goods-price">￥{{item.goods_price}}</view>
            <view class="goods-num-tool">
              <view class="goods-vnum">x{{item.nums}}</view>
              
            </view>
          </view>
        </view>
      </view>
      </view>

   </view>

    <view class="statistics">
         <view class="all-price">
        合计: <text class="price">￥{{checkedPrice}}</text>
      </view>
       
       <navigator class="all-count">       
        <u-button
          type="error"
          shape="circle"
           @click="handlePay"
        >
        去结算({{checkedCount}})
        </u-button>      
        
        </navigator>

    </view>
  </view>
</template>

<script>
import {mapGetters,mapState,mapActions } from 'vuex'
export default {
  data(){
    return{
      address:null
    }
  },
   computed:{
     ...mapState('user',["token"]),
     ...mapGetters("cart",["checkedCartList","checkedPrice","checkedCount"]),
     addressDetail(){
       if(!this.address) return ""
       return(
         this.address.provinceName +
        this.address.cityName +
        this.address.countyName +
        this.address.detailInfo
       )
     }
   },
   methods:{
     ...mapActions("user",["fetchToken"]),
     //点击获取地址
   async handleChooseAddress(){
       const [err,res]=await uni.chooseAddress()
      //  console.log(res);
      if(!err){
        this.address=res
      }
     },
     //点击支付
    async handlePay(){
      //判定是否有地址
      if(!this.address){
        uni.showToast({
          title:'您还未选择地址,请选择!',
          icon:"none"
        })
        return
      }
      // //获取用户信息
      // const [err,{ encryptedData, rawData, iv, signature }]=await uni.getUserProfile({
      //   desc:"用于支付"
      // })
      
      // //获取code临时凭证
      // const [err2,{code}]=await uni.login()
      
      // //获取用户toke
      // const {token} = await this.$u.post('/users/wxlogin',{
      //   encryptedData, 
      //   rawData, 
      //   iv, 
      //   signature,
      //   code
      // })
      // 以上三步被封装在vuex里,方便之后调用
      if(!this.token){
        await this.fetchToken()
      }
      
      //准备创建订单要得参数
      const orderParams = {
        order_price:this.checkedPrice,
        consignee_addr:`${this.addressDetail}|${this.address.userName}|${this.address.telNumber}`,
        goods:this.checkedCartList.map(item=>({
          goods_id:item.goods_id,
          goods_number:item.nums,
          goods_price:item.goods_price
        }))
      }
      
      //发送请求获取订单编号
      const {order_number} = await this.$u.post('/my/orders/create',orderParams)
       

       //创建支付流程
       const {pay} = await this.$u.post("/my/orders/req_unifiedorder",{order_number})
      
      //调用微信支付
      const res = await uni.requestPayment(pay)
     }
   }
}
</script>

<style lang="scss">
.pay{
    background-color:#f9f9f9;
    height: 100vh;
    padding: 20rpx 20rpx 65rpx;
    .site{
        background-color: #fff;
        width: 711rpx;
        height: 187rpx;
        border-radius: 10rpx;
    }
    .selected{
        background-color: #fff;
        width: 711rpx;       
        border-radius: 10rpx;
        margin-top: 35rpx;
        padding: 17rpx 26rpx 0;
        .selected-text{
            font-weight: 900;
            font-size: 26rpx;
            margin-bottom: 20rpx;
        }
  .cart-list {
    .cart-item {
        
        display: flex;
       //   padding: 10rpx;
        margin-bottom: 20rpx;
    //   border-bottom: 1rpx solid #ccc;
      .goods-img {
        flex: 1;

        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10rpx;
      }

      .goods-info {
        color: #666;
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
       
        .goods-price-num {
          display: flex;
          justify-content: space-between;
          .goods-price {
            color: $themeColor;
          }

          .goods-num-tool {
            width: 45rpx;
            height: 40rpx;
            display: flex;
            justify-content: space-between;
            margin-right: 15rpx;
            .num-btn {
            //   border: 1rpx solid #ccc;
              border-radius: 50%;
              width: 40rpx;
              height: 40rpx;
              text-align: center;
              line-height: 40rpx;
            }
          }
        }
      }
    }
  }
    }
    .statistics {
    position: fixed;
    background-color: #fff;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    border-top: 1rpx solid #ccc;
    display: flex;
    align-items: center;
    padding: 15rpx;
    
    .all-price {
      flex: 1;
      color: #666; 
      .price{
          color: red;
      }  
    }
    }
}
</style>